<template>
   <div class="detail">
      <b-row class="detail-li shadow-sm pl-3 pr-3 pb-2 pt-3 pl-md-4 pr-md-4 pb-md-3 pt-md-4">
        <breadcrumb :navigation="navigation" />
        <div class="w-100"></div>
        <div class="header">
          <span class="title">{{article.title}}</span>
          <div class="info">
            <span>Ruision</span>
            <span class="offset">{{article.createTime}}</span>
            <span class="offset">阅读 {{article.readNum}}</span>
            <span v-if="article.isAllowComment == 1" class="offset">评论 {{article.commentNumber}}</span>
          </div>
        </div>
        <div class="content overflow-auto w-100">
          <mavon-editor
            v-model="article.content"
            :code-style="mavonEditor.code_style"
            :subfield="mavonEditor.subfield"
            :defaultOpen="mavonEditor.defaultOpen"
            :toolbarsFlag="mavonEditor.toolbarsFlag"
            :boxShadow="mavonEditor.boxShadow"
            :fontSize="mavonEditor.fontSize"
            boxShadowStyle="0 0 0 0 rgba(0, 0, 0, 0.1)"
          />
          <span class="like"
              v-if="article.isAllowPraise == 1"
              :data-id="article.isPraise"
              :style="[article.isPraise == 1 ? background : '']"
              @click="like(0, article)"
              @mouseenter="mouse(1, $event)"
              @mouseleave="leave(1, $event)">
            <span class="iconfont" :style="[article.isPraise == 1 ? {color: '#fff'} : '']">
              &#xe600;
            </span>
            {{article.praise}}
          </span>
        </div>
      </b-row>
      <b-row v-if="relateArticles.length > 0" class="detail-li shadow-sm pl-3 pr-3 pb-2 pt-3 pl-md-4 pr-md-4 pb-md-3 pt-md-4">
        <div class="comment-header">
          <h3>
            <span class="iconfont">&#xe638;</span>
            相关文章
          </h3>
          <h3 class="refush" @click="getRelate">
            <span class="iconfont">&#xe642;</span>
            刷新
          </h3>
        </div>
        <div class="article-ul overflow-auto">
          <b-row v-for="item in relateArticles"
              :key="item.id" class="d-flex flex-column">
            <div class="wrapper" @click="selectId(item.id)">
              <b-img-lazy :src="item.image"/>
            </div>
            <div class="explain">
              <h6 @mouseenter="mouseStart"
                  @mouseleave="mouseEnd"
                  @click="selectId(item.id)">
                {{item.title}}
              </h6>
              <div class="button-menu">
                <div class="menu"
                    @mouseenter="mouse(3, $event)"
                    @mouseleave="leave(3, $event)">
                  <span class="iconfont">&#xe656;</span>
                  {{item.nickName}}
                </div>
                <div class="menu"
                    @mouseenter="mouse(3, $event)"
                    @mouseleave="leave(3, $event)">
                  <span class="iconfont">&#xe604;</span>
                  {{item.createTime}}
                </div>
              </div>
            </div>
          </b-row>
        </div>
      </b-row>
      <b-row class="detail-li shadow-sm pl-3 pr-3 pb-2 pt-3 pl-md-4 pr-md-4 pb-md-3 pt-md-4" v-if="comments.length > 0 && article.isAllowComment == 1">
        <div class="comment-header">
          <h3>
            <span class="iconfont">&#xe610;</span>
            评论
          </h3>
          <h3>{{query.total}}条评论</h3>
        </div>
        <div class="comment-ul">
          <b-row v-for="item in comments"
              :key="item.id"
              :data-id="item.id"
              :style="[selectItem == item.id ? borderColor : '']"
              @mouseenter="mouse(2, $event)"
              @mouseleave="leave(2, $event)">
            <div class="comment-context">
              <div class="title">
                <img :src="item.avatar"/>
                <div>
                  <p class="author" :style="[selectItem == item.id ? color : '']">{{item.nickName}}</p>
                  <p class="time">{{item.floor}}楼 · {{item.createTime}}</p>
                </div>
              </div>
              <div class="bottom-box">
                <p class="comment-text">
                  {{item.content}}
                </p>
              </div>
              <div class="button">
                <h3 @click="like(1, item)">
                  <span class="iconfont">&#xe600;</span>
                  <span v-if="item.isPraise == 0">赞我呀</span>
                  <span v-if="item.isPraise == 0 && item.likeNum > 0">，目前已有</span>
                  <span v-if="item.likeNum > 0">{{ item.likeNum }}人觉得很赞 </span>
                </h3>
              </div>
            </div>
          </b-row>
        </div>
        <b-row class="w-100">
          <b-col cols="12" class="d-none d-sm-block">
            <pagination class="pagination" v-if="comments.length > 0" :query="query" @page="handlePage" />
          </b-col>
          <b-col cols="12" class="d-sm-none d-block">
            <mobile-pagination v-if="comments.length > 0" :query="query" @page="handlePage" />
          </b-col>
        </b-row>
      </b-row>
      <b-row class="detail-li shadow-sm pl-3 pr-3 pb-2 pt-3 pl-md-4 pr-md-4 pb-md-3 pt-md-4" v-if="article.isAllowComment == 1">
        <div class="comment-header">
          <h3>
            <span class="iconfont">&#xe630;</span>
            发表评论
          </h3>
        </div>
        <div class="w-100 justify-content-center">
          <editor class="editor" :reply="showCancelReply" @submit="handleSubmit"></editor>
        </div>
      </b-row>
   </div>
</template>

<script>
import WangEditor from '../../components/WangEditor'
import Breadcrumb from '../../components/Breadcrumb'
import Pagination from '../../components/Pagination'
import MobilePagination from '../../components/MobilePagination'
import Editor from '../../components/Editor'
import { mapGetters } from 'vuex'
import { detail, relate } from '@/api/article'
import { praise } from '@/api/praise'
import { list, add } from '@/api/comment'
import { record } from '@/api/record'

export default {
  name: 'ContentDetail',
  data () {
    return {
      navigation: '> 博文',
      showCancelReply: false,
      id: 0,
      selectItem: 0,
      background: {
        'background': '',
        'color': '#fff'
      },
      color: {
        'color': ''
      },
      borderColor: {
        'borderColor': '#asds'
      },
      query: {
        type: 1,
        parentId: 0,
        current: 1,
        size: 10
      },
      relateArticles: [
        {
          id: 1,
          title: '一篇好文章',
          image: 'https://desk-fd.zol-img.com.cn/t_s208x130c5/g5/M00/04/0E/ChMkJlxG_ruIR3nAABa65fI7gMMAAuhmQIXEVwAFrr9023.jpg',
          nickName: 'Ruison',
          createTime: '9月20日'
        },
        {
          id: 2,
          title: '一篇好文章',
          image: 'https://desk-fd.zol-img.com.cn/t_s208x130c5/g5/M00/04/0E/ChMkJlxG_ruIR3nAABa65fI7gMMAAuhmQIXEVwAFrr9023.jpg',
          nickName: 'Ruison',
          createTime: '9月20日'
        },
        {
          id: 3,
          title: '一篇好文章',
          image: 'https://desk-fd.zol-img.com.cn/t_s208x130c5/g5/M00/04/0E/ChMkJlxG_ruIR3nAABa65fI7gMMAAuhmQIXEVwAFrr9023.jpg',
          nickName: 'Ruison',
          createTime: '9月20日'
        }
      ],
      article: {
        id: null,
        title: null,
        description: null,
        image: null,
        content: ``,
        commentNumber: 0,
        nickName: null,
        praise: 0,
        isPraise: 0,
        readNum: 0,
        createTime: null,
        isAllowComment: 0,
        isAllowPraise: 0
      },
      comments: [],
      temp: {},
      record: {
        type: 0
      },
      mavonEditor: {
        code_style: 'atom-one-dark',
        toolbarsFlag: false,
        navigation: true,
        editable: false,
        boxShadow: false,
        fontSize: '10px',
        previewBackground: '#fff',
        defaultOpen: 'preview', // edit: 默认展示编辑区域, preview: 默认展示预览区域
        subfield: false // 单双栏模式
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    this.record.objectId = this.id
    const color = this.getBackground
    this.background.background = color
  },
  mounted () {
    this.computeFontSize()
    this.addRecord()
    this.getDetail()
    this.getRelate()
  },
  methods: {
    // 获取内容详情
    getDetail () {
      detail(this.id).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          this.article = response.data.data
          // 是否开启评论，是的话获取评论列表数据
          if (this.article.isAllowComment === 1) {
            this.getCommentList()
          }
          let option = {
            title: this.article.title, // 分享标题, 请自行替换
            desc: this.article.description, // 分享描述, 请自行替换
            link: window.location.href, // 分享链接，根据自身项目决定是否需要split
            imgUrl: this.article.image, // 分享图标, 请自行替换，需要绝对路径
            success: () => {},
            error: () => {}
          }
          this.$emit('shareContent', option)
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    // 获取相关文章
    getRelate () {
      relate(this.id, 3).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          this.relateArticles = response.data.data
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    // 获取评论列表
    getCommentList () {
      this.query.total = null
      this.query.pages = null
      this.query.objectId = this.id
      list(this.query).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          // 评论数据
          this.comments = data.records
          // 总数据量
          this.query.total = data.total
          // 总页数
          this.query.pages = data.pages
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    // 添加评论
    addComment () {
      this.temp.type = 1
      this.temp.parentId = 0
      this.temp.objectId = this.id
      add(this.temp).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          const data = response.data.data
          if (this.comments.length > 0) {
            this.comments.unshift(data)
          } else {
            this.getCommentList()
          }
          this.$notify({
            title: '来自远程服务器的提示',
            message: '评论成功',
            type: 'success'
          })
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    // 添加访问记录
    addRecord () {
      record(this.record).then(response => {})
    },
    // 点赞
    like (type, row) {
      praise(type, row.id).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          if (type === 0) {
            this.article.isPraise = response.data.data
            if (this.article.isPraise === 1) {
              this.article.praise += 1
            } else {
              this.article.praise -= 1
            }
          } else if (type === 1) {
            row.isPraise = response.data.data
            if (row.isPraise === 1) {
              row.likeNum += 1
            } else {
              row.likeNum -= 1
            }
          }
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    mouseStart (e) {
      this.selectItem = e.target.dataset.id
      e.currentTarget.className = 'animated pulse'
      e.currentTarget.style.color = this.getBackground
      this.color.color = this.getBackground
    },
    mouseEnd (e) {
      this.selectItem = 0
      e.currentTarget.className = ''
      e.currentTarget.style.color = ''
      this.color.color = ''
    },
    mouse (type, e) {
      if (type === 1) {
        e.currentTarget.style.background = this.getBackground
      }
      if (type === 2) {
        this.selectItem = e.target.dataset.id
        this.color.color = this.getBackground
        this.borderColor.borderColor = this.getBackground
      }
      if (type === 3) {
        e.currentTarget.style.color = this.getBackground
      }
    },
    leave (type, e) {
      if (type === 1) {
        if (e.currentTarget.getAttribute('data-id') === '0') {
          e.currentTarget.style.background = ''
          e.currentTarget.style.borderColor = ''
        }
      }
      if (type === 2) {
        this.selectItem = 0
        this.color.color = ''
        this.borderColor.borderColor = ''
      }
      if (type === 3) {
        e.currentTarget.style.color = ''
      }
    },
    handlePage (query) {
      this.query = query
      this.getCommentList()
    },
    handleSubmit (temp) {
      this.temp = temp
      this.addComment()
    },
    selectId (id) {
      this.$router.push({
        path: `/content_detail/${id}`
      })
    },
    computeFontSize () {
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          if (window.screenWidth > 540) {
            this.mavonEditor.fontSize = '14px'
          } else {
            this.mavonEditor.fontSize = '12px'
          }
        })()
      }
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ])
  },
  components: {
    WangEditor,
    Breadcrumb,
    Pagination,
    MobilePagination,
    Editor
  }
}
</script>

<style scoped lang="stylus">
  @import "~styles/custom/mixins.styl"
  .iconfont
    font-size 14px
  p
    margin-bottom 0rem
  .markdown-body
    font-size: 14px
  @media (min-width: 540px)
    .detail
      .detail-li
        .header
          margin-top 15px
          .title
            line-height 34px
            margin-bottom 14px
            font-size 30px
            word-break break-word
  @media (max-width: 540px)
    .detail
      .detail-li
        .header
          margin-top 6px
          .title
            line-height 28px
            margin-bottom 14px
            font-size 24px
            font-weight 300px
            word-break break-word

  .detail
    opacity: 0.9
    .detail-li
      background #fff
      margin-bottom 20px
      margin-left 0
      margin-right 0
      .header
        // margin-top 15px
        // .title
        //   line-height 28px
        //   margin-bottom 14px
        //   font-size 24px
        //   word-break break-word
        .info
          margin 8px 0 16px 0
          color: #969696
          font-size 13px
          .offset
            padding-left 8px
      .content
        div
          margin-bottom 40px
        .like
          display block
          width 80px
          border 1px #C2C2C2 solid
          border-radius 20px
          -moz-border-radius 20px
          text-align center
          padding: 0 3px
          font-size 14px
          line-height: 28px
          margin auto
          margin-bottom 10px
          border-style: solid
          border-width: 1px
          cursor: pointer
          -weibkit-transition: all .3s
          -moz-transition: all .3s
          transition: all .3s
          color: #545c63
          background-color: rgba(84,92,99,0.1)
          border-color: rgba(84,92,99,0.1)
          opacity: 1
          border-color: transparent
          .iconfont
            font-size 16px
        .like:hover
          // background #23BDBD
          color #fff
          .iconfont
            color #fff
      .comment-header
        display flex
        justify-content space-between
        width 100% !important
        border 1px solid #FFF
        border-bottom-color #E6E6EB
        h3
          padding 0 0 8px 0
          font-size 12px
          color #666
        .refush
          cursor pointer
      .comment-ul
        display flex
        align-self stretch
        flex-flow column
        width 100% !important
        .row
          padding 0 10px 4px 0px
          transform: scale(1); /*图片原始大小1倍*/
          transition: all ease .6s
          border: 1px solid #FFF
          border-bottom-color: #E6E6EB
          cursor pointer
          margin-right 0
          margin-left 0
        .row:last-child
          border-bottom-color: #fff
        .row:hover
          background #fff
          box-shadow 0 0 20px 6px rgba(60, 60, 60,.1.8)
          transform: scale(1.1); /*图片需要放大2倍*/
          position: relative; /*相对定位，是相对于前面的容器定位的*/
          z-index: 100
        .comment-context
          padding 15px 10px 5px 10px
          display flex
          flex-flow column
          align-self stretch
          .title
            display flex
            flex-flow row
            margin-bottom 1rem
            img
              width 40px
              height 40px
              border-radius 50%
              -webkit-border-radius 50%
              -moz-border-radius 50%
              margin-right 10px
            div
              .author
                white-space: nowrap
                overflow: hidden
                -ms-text-overflow: ellipsis
                text-overflow: ellipsis
                font-size 14px
                font-weight bold
              .time
                font-size 12px
            div
              p:last-child
                margin-top 4px
          .bottom-box
            padding-top 8px
            line-height 1.5
            .comment-text
              color: #666
              overflow: hidden
              -ms-text-overflow: ellipsis
              text-overflow: ellipsis
          .button
            display flex
            flex-flow row
            font-size 14px
            h3
              margin-top 14px
              color #969696
              font-size: 12px
              .iconfont
                font-size 14px
            h3:hover
              color #666
      .pagination
        margin 15px 0 6px 0
      .editor
        margin 20px 0px
      .article-ul
        display flex
        flex-flow row
        .row
          margin 10px 16px
          cursor pointer
          border 1px solid transparent /* 加上防止缩放抖动 */
          box-shadow 0 0 20px 6px transparent /* 加上防止缩放抖动 */
          .wrapper
            overflow hidden
            img
              width 240px
              height 150px
              transition all ease .6s
            img:hover
              transform scale(1.2)
          .explain
            padding 2px 4px 0px 4px
            h6
              width 240px
              line-height 20px
              padding 6px 4px 0 4px
              ellipsis()
            .button-menu
              display flex
              flex-flow row
              font-size 12px
              color #999
              .menu
                cursor pointer
                .iconfont
                  font-size 12px
              div:last-child
                margin-left 8px
              /*.menu:hover*/
                /*color #23BDBD*/
          /*li:hover
            border 1px solid #23BDBD
            box-shadow 0 0 20px 6px rgba(60, 60, 60,.2.5)*/
</style>
